<template>
	<view class="center">
		<view :style="{height: statusBarHeight+'px'}"></view>
		<view  @click="sousClick">
			<u-search placeholder="请输入书名" shape="square" bg-color="#FFFFFF"
			style="margin: 20rpx 20rpx;"></u-search>
		</view>
		<view class="u-flex">
			<view class="scrollleft">
				<view v-for="(item,index) in scrollleft" :key="index"
				@click="itemLeft(index)"
				style="padding: 30rpx 0;font-weight: bold;" :class="itemAvtive == index?'itemactive':''">
					<text>{{item.name}}</text>
				</view>
			</view>
			<scroll-view class="scrollright" scroll-y :scroll-into-view="'right'+itemAvtive" scroll-with-animation>
				<view v-for="(item,index) in scrollerright" :key="index" :id="'right'+index">
					<view style="padding: 15rpx;">{{item.name}}</view>
					<view class="right">
						<view v-for="(item,index) in item.list"
						class="itemright" @click="rightItemClick(item)">
							<text>{{item}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemAvtive:0,
				
				scrollleft:[
					{id:1,name:"分类"},
					{id:2,name:"热门标签"},
					{id:3,name:"主题"},
					{id:4,name:"角色"},
					{id:5,name:"情节"}
				],
				scrollerright:[
					{id:1,name:"分类",list:["都市","玄幻","奇幻仙侠","历史","科幻","种田","同人","游戏体育"]},
					{id:2,name:"热门标签",list:["都市","都市修真","系统","玄幻","奇幻仙侠","重生","搞笑轻松","修仙","悬疑灵异","末世","扮猪吃虎","神豪","穿越","都市异能","灵异","校花","东方玄幻","灵气复苏","官场","无敌"
					,"单女主","都市脑洞"]},
					{id:3,name:"主题",list:["都市","玄幻","奇幻仙侠","搞笑轻松","悬疑灵异","都市异能","东方玄幻","灵气复苏","都市脑洞","末日求生","都市日常","历史","玄幻脑洞"]},
					{id:4,name:"角色",list:["都市修真","系统","重生","修真","末世","神豪","穿越","灵异","无敌","诸天万界","破案","种田","网游"]},
					{id:5,name:"情节",list:["都市修真","系统","重生","修真","末世","神豪","玄幻","奇幻仙侠","搞笑轻松","悬疑灵异","都市异能","东方玄幻","穿越","都市异能","灵异","校花"]}
				
				],
				statusBarHeight:0
			}
		},
		mounted() {
			let that = this
			//获取手机系统信息
			const info = uni.getSystemInfoSync()
			//设置状态栏高度
			that.statusBarHeight = info.statusBarHeight
			
		},
		methods: {
			itemLeft(e){
				this.itemAvtive = e
			},
			sousClick(){
				uni.navigateTo({
					url:"/pages/index/search-for/search-for"
				})
			},
			rightItemClick(e){
			 	console.log(e)
				uni.navigateTo({
					url:"/pages/index/searchList/searchList?type="+e
				})
			}
		}
	}
</script>

<style lang="scss">
	.center{
		padding: 10rpx 0;
		background-color: #F6F6F6;
		.scrollleft{
			width: 160rpx;
			margin-bottom: auto;
			text-align: center;
			.itemactive{
				color: #EF6D2E;
			}
		}
		.scrollright{
			background-color: #FFFFFF;
			border-radius: 0.5em;
			padding: 30rpx;
			height: 85vh;
			display: flex;
			flex: 1;
			.right{
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 20rpx;
				.itemright{
					width: 33%;
					text-align: center;
					margin: 20rpx 0;
					
					text{
						background-color: #F7F7F7;
						padding: 20rpx 0;
						border-radius: 0.5em;
						display: inline-block;
						width: 90%;
					}
				}
			}

		}
	}

</style>
